<template>
  <div>
    <div class="form">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="视频目录" :name="0">
          <div class="search">
            <div class="date_picker">
              <el-input
                placeholder="请输入目录名称"
                v-model="query.videoFileFolder"
                class="search_info"
              >
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
              <el-select
                v-model="query.courseId"
                placeholder="请选择课程名称"
                class="search_info2"
              >
                <el-option
                  v-for="item in courseList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                ></el-option>
              </el-select>
            </div>
            <div>
              <el-button @click="resetBox()" class="searchBtn">重置</el-button>
              <el-button type="primary" @click="getFileList()" class="searchBtn"
                >搜索</el-button
              >
              <el-button type="primary" @click="addBox()" class="searchBtn"
                >新增目录</el-button
              >
            </div>
          </div>
          <el-table
            class="listTable"
            :data="filerList"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column label="课程名称" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.courseName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="目录名称" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.videoFileFolder }}</span>
              </template>
            </el-table-column>
            <el-table-column label="更新时间" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.updateTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="300">
              <template slot-scope="{ row }">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="editBox(row.id)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="delBox(row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :total="total2"
            layout="total, sizes, prev, pager, next"
            :page-size="limit2"
            :page-sizes="[10, 20, 50, 100]"
            @size-change="handleSizeChange2"
            :current-page.sync="curPage2"
            @current-change="getList2($event)"
            class="sortStyle"
          />
        </el-tab-pane>
        <el-tab-pane label="视频列表" :name="1">
          <div class="search">
            <div class="date_picker">
              <el-input
                placeholder="请输入视频标题"
                v-model="videoTitle"
                class="search_info"
              >
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
              <el-select
                v-model="videoLevel"
                placeholder="请选择视频级别"
                class="search_info2"
              >
                <el-option
                  v-for="item in levelList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                ></el-option>
              </el-select>
              <el-select
                v-model="courseName"
                placeholder="请选择课程名称"
                class="search_info2"
              >
                <el-option
                  v-for="item in courseList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                ></el-option>
              </el-select>
            </div>
            <div>
              <el-button @click="reset()" class="searchBtn">重置</el-button>
              <el-button type="primary" @click="getList(1)" class="searchBtn"
                >搜索</el-button
              >
              <el-button type="primary" @click="add()" class="searchBtn"
                >新增视频</el-button
              >
            </div>
          </div>
          <el-table
            class="listTable"
            v-loading="listLoading"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column label="视频标题" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.videoTitle }}</span>
              </template>
            </el-table-column>
            <el-table-column label="视频级别" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.videoLevel }}</span>
              </template>
            </el-table-column>
            <el-table-column label="课程名称" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.courseName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="目录名称" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.videoFileFolderName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="视频名称" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.videoName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="绑定章节名称" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.chapterName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="视频展示地址" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.videoShowUrl }}</span>
              </template>
            </el-table-column>
            <el-table-column label="视频状态" align="center" width="100">
              <template slot-scope="{ row }">
                <span v-if="row.videoStatus == '1'">已上架</span>
                <span v-if="row.videoStatus == '2'">已下架</span>
              </template>
            </el-table-column>
            <el-table-column label="排序" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.sort }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="{ row }">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-info"
                  @click="preview(row.videoShowUrl)"
                  >视频详情</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-info"
                  @click="deals(row)"
                  >章节绑定</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="infoEdit(row)"
                  >修改</el-button
                >
                <!-- <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="edit(row)"
                  >排序</el-button
                > -->
                <!-- <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="option(row.id, '1')"
                  v-if="row.videoStatus == '2'"
                  >上架</el-button
                > -->
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="option(row.id, '1')"
                  v-if="row.videoStatus == '2'"
                  >上架</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  v-if="row.videoStatus == '1'"
                  @click="option(row.id, '2')"
                  >下架</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="del(row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :total="total"
            layout="total, sizes, prev, pager, next"
            :page-size="limit"
            :page-sizes="[10, 20, 50, 100]"
            @size-change="handleSizeChange"
            :current-page.sync="curPage"
            @current-change="getList($event)"
            class="sortStyle"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
      :title="boxTitle"
      :visible.sync="boxShow"
      center
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="课程名称：" prop="courseId">
          <el-select
            v-model="form.courseId"
            placeholder="请选择"
            style="width: 300px"
          >
            <el-option
              v-for="item in courseList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称：" prop="videoFileFolder">
          <el-input
            v-model="form.videoFileFolder"
            style="width: 300px"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>
      <div class="apply_btn">
        <el-button @click="boxShow = false">取消</el-button>
        <el-button type="primary" @click="submitBox()">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="视频新增"
      :visible.sync="addShow"
      center
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <div class="inline">
        <div class="fonts">视频标题：</div>
        <div>
          <el-input v-model="addVideoTitle" placeholder="请输入"></el-input>
        </div>
      </div>
      <div class="inline">
        <div class="fonts">视频级别：</div>
        <div>
          <el-select v-model="addVideoLevel" placeholder="请选择视频级别">
            <el-option
              v-for="item in levelList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="inline">
        <div class="fonts">课程名称：</div>
        <div>
          <el-select
            v-model="addCourseId"
            placeholder="请选择课程名称"
            @change="change($event)"
          >
            <el-option
              v-for="item in courseList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="inline">
        <div class="fonts">目录名称：</div>
        <div>
          <el-select v-model="addBoxId" placeholder="请选择目录">
            <el-option
              v-for="item in boxList"
              :key="item.id"
              :label="item.videoFileFolder"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="inline">
        <div class="fonts">视频上传：</div>
        <div style="width: 340px">
          <el-upload
            class="avatar-uploader"
            :headers="token"
            name="video"
            action="https://www.xlpx.org.cn/manage/prod-api/video/upload"
            v-bind:on-progress="uploadVideoProcess"
            v-bind:on-success="handleVideoSuccess"
            v-bind:before-upload="beforeUploadVideo"
            v-bind:show-file-list="false"
          >
            <video
              v-if="videoForm.showVideoPath != '' && !videoFlag"
              v-bind:src="videoForm.showVideoPath"
              class="avatar video-avatar"
              controls="controls"
            >
              您的浏览器不支持视频播放
            </video>
            <i
              v-else-if="videoForm.showVideoPath == '' && !videoFlag"
              class="el-icon-plus avatar-uploader-icon"
            ></i>
            <el-progress
              v-if="videoFlag == true"
              type="circle"
              v-bind:percentage="videoUploadPercent"
              style="margin-top: 7px"
            ></el-progress>
          </el-upload>
        </div>
      </div>

      <div class="apply_btn">
        <el-button @click="addShow = false">取消</el-button>
        <el-button type="primary" @click="submit()">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="视频修改"
      :visible.sync="editShow"
      center
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <div class="inline">
        <div class="fonts">视频标题：</div>
        <div><el-input v-model="name" placeholder="请输入"></el-input></div>
      </div>
      <div class="inline">
        <div class="fonts">课程名称：</div>
        <div>
          <el-select
            v-model="editCourseId"
            placeholder="请选择课程名称"
            @change="changeBox($event)"
          >
            <el-option
              v-for="item in courseList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="inline">
        <div class="fonts">目录名称：</div>
        <div>
          <el-select v-model="editBoxId" placeholder="请选择目录">
            <el-option
              v-for="item in editBoxList"
              :key="item.id"
              :label="item.videoFileFolder"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="inline">
        <div class="fonts">排序：</div>
        <div><el-input v-model="sort" placeholder="请输入"></el-input></div>
      </div>
      <div class="apply_btn">
        <el-button @click="editShow = false">取消</el-button>
        <el-button type="primary" @click="editSubmit()">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="视频绑定章节"
      :visible.sync="dealShow"
      center
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <div class="inline">
        <div class="fonts">视频标题：</div>
        <div>
          <el-input v-model="name" placeholder="请输入" disabled></el-input>
        </div>
      </div>
      <div class="inline">
        <div class="fonts">题库：</div>
        <div>
          <el-select
            v-model="selCourse"
            placeholder="请选择课程"
            class="sel_info"
            @change="getChapterList(selCourse)"
          >
            <el-option
              v-for="item in courseList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="inline">
        <div class="fonts">章节：</div>
        <div>
          <el-select
            v-model="selChapter"
            placeholder="请选择章节"
            class="sel_info"
            @change="getChapter(selChapter)"
          >
            <el-option
              v-for="item in chapterList"
              :key="item.id"
              :label="item.chapter"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="apply_btn">
        <el-button @click="dealShow = false">取消</el-button>
        <el-button type="primary" @click="dealSubmit()">绑定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  videoDel,
  videoAdd,
  videoList,
  courseList,
  videoEdit,
  videoSort,
  videoDetailInfo,
  chapterLIst,
  binding,
  videoPut,
  getFileList,
  getFileDetail,
  getFileEdit,
  getFileAdd,
  getFileDel,
} from "@/api/system/user";
import { getToken } from "@/utils/auth";
import {} from "@/api/article";
export default {
  components: {},
  data() {
    return {
      form: {},
      query: {},
      boxTitle: "",
      boxShow: false,
      filerList: [],
      activeName: 0,
      token: {
        Authorization: getToken(),
      },
      videoTitle: "",
      videoLevel: "",
      courseName: "",
      selCourse: "",
      selChapter: "",
      selChapterName: "",
      detailInfo: null,
      levelList: [
        { key: "1", value: "初级" },
        { key: "2", value: "中级" },
        { key: "3", value: "高级" },
      ],
      editBoxList: [],
      courseList: [],
      boxList: [],
      chapterList: [],
      list: [],
      limit: 10,
      total: 0,
      limit2: 0,
      total2: 0,
      curPage2: 1,
      listLoading: false,
      curPage: 1,
      addShow: false,
      addVideoTitle: "",
      addVideoLevel: "",
      addCourseName: "",
      addCourseId: "",
      addBoxId: "",
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: "",
      //进度条的进度，
      isShowUploadVideo: false,
      //显示上传按钮
      videoForm: {
        showVideoPath: "",
      },
      videoName: "",
      note: "",
      sort: "",
      editCourseId: "",
      editBoxId: "",
      name: "",
      editShow: false,
      id: "",
      dealShow: false,
      boxLimit: 10,
      currentPage: 1,
      boxId: null,
    };
  },
  created() {},
  mounted() {
    this.getCourseList();
    this.getList(1);
    this.getFileList();
  },
  methods: {
    resetBox() {
      this.query = {};
      this.getFileList();
    },
    addBox() {
      this.boxId = null;
      this.boxShow = true;
      this.form = {};
    },
    submitBox() {
      let params = {
        id: this.boxId,
        videoFileFolder: this.form.videoFileFolder,
        courseId: this.form.courseId,
      };
      if (this.boxId) {
        getFileEdit(params).then((res) => {
          if (res.code == "200") {
            this.boxShow = false;
            this.$message({ message: res.msg, type: "success" });
            this.getFileList();
          } else {
            this.$message({ message: res.msg, type: "error" });
          }
        });
      } else {
        getFileAdd(params).then((res) => {
          if (res.code == "200") {
            this.boxShow = false;
            this.$message({ message: res.msg, type: "success" });
            this.getFileList();
          } else {
            this.$message({ message: res.msg, type: "error" });
          }
        });
      }
    },
    delBox(v) {
      getFileDel(v).then((res) => {
        if (res.code == "200") {
          this.$message({ message: res.msg, type: "success" });
          this.getFileList();
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    editBox(v) {
      this.boxId = v;
      this.boxTitle = "文件夹修改";
      this.boxShow = true;
      let params = {
        id: v,
      };
      getFileDetail(params).then((res) => {
        if (res.code == "200") {
          this.form = res.data;
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    getFileList() {
      let params = {
        pageNum: this.currentPage,
        pageSize: this.boxLimit,
        courseId: this.query.courseId,
        videoFileFolder: this.query.videoFileFolder,
      };
      getFileList(params).then((res) => {
        if (res.code == "200") {
          this.filerList = res.rows;
          this.total2 = res.total;
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    getChapterList(id) {
      chapterLIst(id).then((res) => {
        if (res.code == "200") {
          this.chapterList = res.data;
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    getChapter(val) {
      this.chapterList.forEach((element) => {
        if (val == element.id) {
          this.selChapterName = element.chapter;
        }
      });
    },
    infoEdit(val) {
      this.id = val.id
      this.editShow = true;
      videoDetailInfo(val.id).then((res) => {
        if (res.code == 200) {
          // this.detailInfo = res.data;
          this.name = res.data.videoTitle;
          this.editCourseId = res.data.courseId;
          this.changeBox(this.editCourseId, res.data.videoFileFolderId);
          this.sort = res.data.sort;
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    changeBox(id, val) {
      this.editBoxList = [];
      let params = {
        courseId: id,
      };
      getFileList(params).then((res) => {
        if (res.code == "200") {
          this.editBoxList = res.rows;
          this.editBoxId = val;
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    edit(val) {
      this.editShow = true;
      this.id = val.id;
      this.sort = val.sort;
      this.name = val.videoTitle;
    },
    editSubmit() {
      let params = {
        sort: this.sort,
        id: this.id,
        videoTitle: this.name,
        videoFileFolderId: this.editBoxId,
        courseId: this.editCourseId
      };
      videoPut(params).then((res) => {
        if (res.code == 200) {
          this.editShow = false;
          this.getList(1);
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    deals(val) {
      this.id = val.id;
      this.dealShow = true;
      this.name = val.videoTitle;
      this.selChapter = "";
      this.selCourse = "";
      this.selChapterName = "";
    },
    dealSubmit() {
      let params = {
        id: this.id,
        chapterId: this.selChapter,
        chapterName: this.selChapterName,
      };
      binding(params).then((res) => {
        if (res.code == 200) {
          this.dealShow = false;
          this.getList(1);
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    preview(val) {
      window.open("https://www.xlpx.org.cn/fire" + val);
    },
    change(val) {
      this.boxList = [];
      this.addBoxId = "";
      let params = {
        courseId: val,
      };
      getFileList(params).then((res) => {
        if (res.code == "200") {
          this.boxList = res.rows;
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
      this.courseList.forEach((element) => {
        if (val == element.key) {
          this.addCourseName = element.value;
        }
      });
    },
    //上传前回调
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 900;
      if (["video/mp4", "video/avi", "video/rmvb"].indexOf(file.type) == -1) {
        this.$message({ message: "请上传正确的视频格式", type: "error" });
        return false;
      }
      if (!fileSize) {
        this.$message({ message: "视频大小不能超过900MB", type: "error" });
        return false;
      }
      this.isShowUploadVideo = false;
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    //上传成功回调
    handleVideoSuccess(res, file) {
      this.isShowUploadVideo = true;
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      //后台上传地址
      if (res.code == 200) {
        this.videoName = res.videoName;
        this.videoForm.showVideoPath =
          "https://www.xlpx.org.cn/fire/" + res.videoShowUrl;
      }
    },
    submit() {
      let params = {
        videoTitle: this.addVideoTitle,
        videoLevel: this.addVideoLevel,
        courseName: this.addCourseName,
        courseId: this.addCourseId,
        videoFileFolderId: this.addBoxId,
        videoName: this.videoName,
      };
      videoAdd(params).then((res) => {
        if (res.code == 200) {
          this.addShow = false;
          this.getList(1);
          this.$message({ message: res.msg, type: "success" });
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    add() {
      this.addShow = true;
      this.addVideoTitle = "";
      this.addVideoLevel = "";
      this.addCourseName = "";
      this.addCourseId = "";
      this.videoName = "";
    },
    getCourseList() {
      courseList().then((res) => {
        if (res.code == "200") {
          this.courseList = [];
          res.rows.forEach((element) => {
            let temp = {
              key: element.courseId,
              value: element.courseName,
            };
            this.courseList.push(temp);
          });
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    option(id, type) {
      if (type == "1") {
        this.note = "确定上架该视频么？";
      } else {
        this.note = "确定下架该视频么？";
      }
      this.$confirm(this.note, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let params = {
          id: id,
          videoStatus: type,
        };
        videoEdit(params).then((res) => {
          if (res.code == "200") {
            this.$message({ message: res.msg, type: "success" });
            this.getList(1);
          } else {
            this.$message({ message: res.msg, type: "error" });
          }
        });
      });
    },
    del(id) {
      this.$confirm("确定删除该视频吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        videoDel(id).then((res) => {
          if (res.code == "200") {
            this.$message({ message: res.msg, type: "success" });
            this.getList(1);
          } else {
            this.$message({ message: res.msg, type: "error" });
          }
        });
      });
    },
    handleSizeChange2() {},
    handleSizeChange() {},
    reset() {
      this.videoTitle = ''
      this.videoLevel = ''
      this.courseName = ''
      this.getList(1)
    },
    /** 查询用户列表 */
    getList(page) {
      let params = {
        pageNum: page,
        pageSize: this.limit,
        videoTitle: this.videoTitle,
        videoLevel: this.videoLevel,
        courseId: this.courseName,
      };
      this.listLoading = true;
      videoList(params).then((res) => {
        this.listLoading = false;
        if (res.code == 200) {
          this.list = res.rows;
          this.total = res.total;
          this.list.forEach((element) => {
            switch (element.videoLevel) {
              case "1":
                element.videoLevel = "初级";
                break;
              case "2":
                element.videoLevel = "中级";
                break;
              default:
                element.videoLevel = "高级";
                break;
            }
          });
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
  },
};
</script>
<style scoped>
.form {
  padding-left: 26px;
  padding-right: 24px;
  padding-top: 24px;
  background: #fff;
}
.search {
  display: flex;
  position: relative;
}
.search_info {
  width: 192px;
  height: 40px;
  margin-right: 16px;
}
.searchBtn {
  margin-left: 16px;
  height: 36px;
}
.sortStyle {
  height: 19px;
  float: right;
  /* right: 24px; */
  margin-top: 20px;
  margin-bottom: 30px;
}
.pos_right_btn {
  position: absolute;
  right: 0;
}
.opt_font {
  cursor: pointer;
  color: #2e82ff;
}
.detail_title {
  font-size: 16px;
  font-weight: 400;
  color: #212121;
  line-height: 22px;
}
.detail_title span {
  padding-left: 4px;
  background: #1e88e5;
  margin-right: 12px;
}
.row {
  display: flex;
  padding-bottom: 12px;
}
.detail_info {
  padding-top: 16px;
}
.info_left {
  display: flex;
}
.info_right {
  display: flex;
  padding-left: 202px;
}
.info_left_title {
  font-size: 14px;
  font-weight: 400;
  color: #616161;
  line-height: 20px;
  width: 112px;
  margin-right: 16px;
}
.info_left_content {
  font-size: 14px;
  font-weight: 400;
  color: #212121;
  line-height: 20px;
  width: 150px;
}
.pos_top {
  padding-top: 12px;
}
.detailTable {
  margin-top: 16px;
}
.opt_font {
  color: #1e88e5;
  cursor: pointer;
}
.page_pos {
  text-align: right;
  padding-top: 10px;
}
.backBtn {
  text-align: center;
  margin-top: 10px;
}
/deep/ .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% -30px);
  /* max-width: ; */
}
/deep/ .el-dialog .el-dialog__body {
  flex: 1;
  height: 700px;
  overflow-y: auto;
  padding-top: 0;
}
.tab {
  display: flex;
  position: absolute;
  right: 32px;
  top: 14px;
}
.tab_border {
  border: 1px solid #409eff;
  color: #409eff;
  padding: 10px 12px;
  font-size: 14px;
  margin-right: 16px;
}
.change {
  border: 1px solid #f56c6c;
  color: #f56c6c;
}
.listTable {
  margin-top: 17px;
}
.search_info2 {
  width: 180px;
  height: 40px;
  margin-right: 16px;
}
.inline {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}
.inline /deep/ .el-input__inner {
  width: 340px;
}
.fonts {
  width: 160px;
  text-align: right;
  position: relative;
  top: 12px;
  padding-right: 30px;
}
.apply_btn {
  display: flex;
  justify-content: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  /* text-align: center; */
  border: 1px dashed #000;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.sel_info {
}
</style>
